<template>
  <div class="home">
    <h3>首页 - 祖爷爷</h3>
    <h4>家族财产：{{$store.state.num}}</h4>
    <grandfather-box />
    <button @click="show=!show">显示/隐藏</button>
    <!-- v-show 显示/隐藏,小程序的!hidden -->
    <h2 v-show="show">要显示/隐藏的内容</h2>
    <!-- template用来分组的不会渲染出来的标签,v-if/v-for相当于小程序的block -->
    <template v-if="isShow">
      <h1>第一个标签</h1>
      <h2>第二个标签</h2>
      <p>第三个标签</p>
    </template>
  </div>
</template>

<script>
import GrandfatherBox from '@/components/index/GrandfatherBox.vue'
  export default {
    components:{GrandfatherBox},
    data(){
      return{
        show:true,
        isShow:true
      }
    },
    methods:{
      getData(event){
        console.log('祖爷爷收到了数据',event);
      }
    },
    mounted(){
      window.eventBus.$on('get-data',this.getData)
    },
    beforeDestroy(){
      window.eventBus.$off('get-data',this.getData)
    }
  }
</script>

<style lang="sass" scoped>
.home
  margin: 10px
  padding: 10px
  border: 3px solid skyblue
</style>
